<template>
    <div class="con">
        <div class="head">
            <p class="head-title">历史森林火灾数据</p>
        </div>
        <img src="../src/assets/static/image/bg2.png" alt="" class="bg">
        <div class="container">
            <!-- 页面载入后，调用init函数 -->
            <!-- 地图 -->
            <div id="map-con" class="map"></div>
            <!-- 资源数量 -->
            <div class="source">
                <!-- 模块标题 -->
                <div class="small-title">
                    <div class="small-title-left">
                        <div class="bar"></div>
                        <p>部署资源数量</p>
                    </div>
                    <div class="small-title-right">
                        <img src="../src/assets/static/image/drone.png" alt="" class="icon">
                    </div>
                </div>
                <!-- 无人机相关数据 -->
                <div class="source-con">
                    <div class="source-number">
                        <img src="../src/assets/static/image/border2.png" alt="" class="borderimg">
                        <div class="source-box">
                            <img src="../src/assets/static/image/firecar.png" alt="" style="width: 40px;height: 30px;">
                            <div class="source-main">
                                <div class="source-title">消防车</div>
                                <div class="source-value">
                                    <span>50</span>
                                    <span style="font-size: 16px;">辆</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="source-number">
                        <img src="../src/assets/static/image/border2.png" alt="" class="borderimg">
                        <div class="source-box">
                            <img src="../src/assets/static/image/flat.png" alt="">
                            <div class="source-main">
                                <div class="source-title">灭火器</div>
                                <div class="source-value">
                                    <span>200</span>
                                    <span style="font-size: 16px;">个</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="source-number">
                        <img src="../src/assets/static/image/border2.png" alt="" class="borderimg">
                        <div class="source-box">
                            <img src="../src/assets/static/image/fireman.png" alt="">
                            <div class="source-main">
                                <div class="source-title">巡护人员</div>
                                <div class="source-value">
                                    <span>100</span>
                                    <span style="font-size: 16px;">个</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="source-number">
                        <img src="../src/assets/static/image/border2.png" alt="" class="borderimg">
                        <div class="source-box">
                            <img src="../src/assets/static/image/tower.png" alt="">
                            <div class="source-main">
                                <div class="source-title">瞭望塔</div>
                                <div class="source-value">
                                    <span>7</span>
                                    <span style="font-size: 16px;">个</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="source-number">
                        <img src="../src/assets/static/image/border2.png" alt="" class="borderimg">
                        <div class="source-box">
                            <img src="../src/assets/static/image/plane.png" alt="">
                            <div class="source-main">
                                <div class="source-title">无人机</div>
                                <div class="source-value">
                                    <span>20</span>
                                    <span style="font-size: 16px;">架</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="source-number">
                        <img src="../src/assets/static/image/border2.png" alt="" class="borderimg">
                        <div class="source-box">
                            <img src="../src/assets/static/image/seror.png" alt="">
                            <div class="source-main">
                                <div class="source-title">传感器</div>
                                <div class="source-value">
                                    <span>120</span>
                                    <span style="font-size: 16px;">个</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 图表 -->
            <div class="charts">
                <div class="line-charts">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>各部署资源数量占比图</p>
                        </div>
                        <div class="small-title-right">
                            <img src="../assets/static/image/drone.png" alt="" class="icon">
                        </div>
                    </div>
                    <div class="line-con">
                        <div id="liner" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
                <div class="pine-charts">
                    <!-- 模块标题 -->
                    <div class="small-title">
                        <div class="small-title-left">
                            <div class="bar"></div>
                            <p>各部署资源数量花瓣图</p>
                        </div>
                        <div class="small-title-right">
                            <img src="../assets/static/image/drone.png" alt="" class="icon">
                        </div>
                    </div>
                    <div class="pine-con">
                        <div id="pine" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted } from 'vue';
onMounted(() => {
    initMap();
    initChart();
    initChart2();
});
onUnmounted(() => {
    myEcharts.dispose;
});
// icon为消防车，icon1为灭火器，icon2为巡护人员，icon3为瞭望塔，icon4为无人机，icon5为传感器
//初始化函数
var initMap = function () {
    //获取地图显示控件
    var map = new qq.maps.Map(document.getElementById("map-con"), {
        //加载地图经纬度信息
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 16,                       //设置缩放级别
        draggable: false,
        panControl: false,           //设置是否可以拖拽
        scrollwheel: false,
        zoomControl: false,        //设置是否可以滚动
        disableDoubleClickZoom: true    //设置是否可以双击放大
    });

    // 消防车
    var anchor = new qq.maps.Point(39.916527, 116.397128),
        size = new qq.maps.Size(30, 21),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage('src/assets/static/image/firecar.png', size, origin, anchor);
    var marker = new qq.maps.Marker({
        icon: icon,
        map: map,
        position: map.getCenter()
    });
    // 灭火器
    var anchor2 = new qq.maps.Point(10.916527, 115.397128),
        size = new qq.maps.Size(30, 30),
        origin = new qq.maps.Point(0, 0),
        icon2 = new qq.maps.MarkerImage('src/assets/static/image/flat.png', size, origin, anchor2);
    var marker = new qq.maps.Marker({
        icon: icon2,
        map: map,
        position: map.getCenter()
    });

    // 巡护人员
    var anchor3 = new qq.maps.Point(99.916527, 114.397128),
        size = new qq.maps.Size(30, 30),
        origin = new qq.maps.Point(0, 0),
        icon3 = new qq.maps.MarkerImage('src/assets/static/image/fireman.png', size, origin, anchor3);
    var marker = new qq.maps.Marker({
        icon: icon3,
        map: map,
        position: map.getCenter()
    });

    // 瞭望塔
    var anchor4 = new qq.maps.Point(199.916527, 117.397128),
        size = new qq.maps.Size(30, 30),
        origin = new qq.maps.Point(0, 0),
        icon4 = new qq.maps.MarkerImage('src/assets/static/image/tower.png', size, origin, anchor4);
    var marker = new qq.maps.Marker({
        icon: icon4,
        map: map,
        position: map.getCenter()
    });

    // 无人机
    var anchor5 = new qq.maps.Point(154.916527, 120.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon5 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor5);
    var marker = new qq.maps.Marker({
        icon: icon5,
        map: map,
        position: map.getCenter()
    });

    // 传感器
    var anchor6 = new qq.maps.Point(288.916527, 121.397128),
        size = new qq.maps.Size(30, 30),
        origin = new qq.maps.Point(0, 0),
        icon6 = new qq.maps.MarkerImage('src/assets/static/image/seror.png', size, origin, anchor6);
    var marker = new qq.maps.Marker({
        icon: icon6,
        map: map,
        position: map.getCenter()
    });
}


let myEcharts = echarts;
function initChart() {
    let chart = myEcharts.init(document.getElementById("liner"), "purple-passion");
    chart.setOption({
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)',
        },
        legend: {
            right: '5%',
            top: '40%',
            orient: 'vertical',
            itemGap: 20,
            itemWidth: 15,
            itemHeight: 15,
            textStyle: {
                show: false,
                color: '#fff',
                fontSize: 14,
            },
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '80%',
                center: ['40%', '50%'],
                color: ['#fac858', '#ee6666', '#3ba272', '#5470c6', '#73c0de', '#91cc75'],
                data: [
                    {
                        value: 61,
                        name: '灭火器',
                    },
                    {
                        value: 50,
                        name: '巡护人员',
                    },
                    {
                        value: 50,
                        name: '瞭望塔',
                    },
                    {
                        value: 60,
                        name: '无人机',
                    },
                    {
                        value: 50,
                        name: '传感器',
                    },
                    {
                        value: 50,
                        name: '消防车',
                    },
                ].sort(function (a, b) {
                    return a.value - b.value
                }),
                roseType: 'area',
                label: {
                    show: false,
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: 'rgb(98,137,169)',
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20,
                    },
                },
                itemStyle: {
                    normal: {
                        shadowColor: 'rgba(0,0,0,0.45); ',
                        shadowBlur: 50,
                    },
                },
            },
        ],
    })
}

let myEcharts2 = echarts;
function initChart2() {
    let chart = myEcharts2.init(document.getElementById("pine"), "purple-passion");
    chart.setOption({
        tooltip: {
            trigger: "item",
            formatter: function (params) {
                var name = params.name;
                return (
                    '<div style="display:flex; align-items:center;">' +
                    '<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:' +
                    params.color +
                    ';margin-right:5px;"></span>' +
                    name +
                    ": " +
                    params.percent + '%' +
                    "</div>"
                );
            },
        },
        series: [
            {
                name: "Access From",
                type: "pie",
                radius: ["0%", "70%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 100,
                    borderColor: "#fff",
                    borderWidth: 2,
                },
                label: {
                    show: false,
                    position: "center",
                },
                labelLine: {
                    show: true,
                },
                data: [
                    { value: 15, name: "消防车" },
                    { value: 15, name: "灭火器" },
                    { value: 10, name: "巡护人员" },
                    { value: 10, name: "瞭望塔" },
                    { value: 5, name: "无人机" },
                    { value: 15, name: "传感器" },
                ],
                label: {
                    show: true,
                    formatter: function (params) {
                        var name = params.name;
                        var percent = params.percent;
                        return name + "\n" + percent + '%';
                    },
                    color: '#fff'
                },
            },
        ],
    })
}

</script>

<style scoped>
html,
body {
    position: relative;
    height: 100%;
}

.con {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    background: url(../src/assets/static/image/bg2.png) no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #1e2e49;
}

.bg {
    width: 100%;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: -1;
}

.head {
    position: fixed;
    top: 0;
    left: 0;
    background: url(../src/assets/static/image/head3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 80.5px;
}

.head-title {
    text-align: center;
    font-size: 27.6px;
    line-height: 17.25px;
    color: rgb(95, 218, 255);
}

.plane {
    width: 575px;
    height: 460px;
}

.container {
    height: calc(100%-75px);
    margin-top: 75px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.small-title {
    height: 34.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 21.85px;
    background-color: rgba(36, 74, 126, 0.3);
}

.small-title-left {
    display: flex;
    align-items: center;
}

.bar {
    width: 11.5px;
    height: 34.5px;
    margin-right: 20px;
    box-shadow: 0 0 20px 10px #064574;
    background: linear-gradient(to bottom, #036eb1, #00f4f0);
}

.icon {
    width: 23px;
    height: 23px;
    margin-right: 23px;
}

/* 地图 */
#map-con {
    margin-left: 5.75px;
    /*地图(容器)显示大小*/
    width: 1380px;
    height: 785px;
    /* margin: 100px auto; */
    position: absolute;
    top: 92px;
    left: 0;
}

/* 资源数量 */
.source-box {
    width: 149.5px;
    justify-content: space-between;
    display: flex;
    color: #fff;
    font-weight: 600;
    align-items: center;
}

.source-box img {
    width: 46px;
    height: 46px;
}

.source {
    box-sizing: border-box;
    position: absolute;
    top: 890px;
    left: 0;
    width: 1380px;
    margin-left: 5.75px;
}

.source-con {
    padding: 11.5px;
    height: 126.5px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.source-main {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.source-value {
    margin-top: 11.5px;
    color: #00b3f5;
    font-size: 29.9px;
}

.source-number {
    position: relative;
    bottom: 0;
    left: 0;
    padding: 28.75px;
}

.borderimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 218.5px;
    height: 132.25px;
}

/* 图表 */
.charts {
    position: absolute;
    right: 11.5px;
    top: 86.25px;
}
.line-charts,.pine-charts {
    width: 517.5px;
    /* height: 500px; */

}
.pine-charts {
    margin-top: 31px;
}

.line-con,.pine-con {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 419.75px;
    padding: 11.5px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}
</style>